import React, {Component} from 'react';

class Content extends  Component{
    state={
        list:[],
        list1:['111','222','333','444'],
        list2:['aaa','bbb','ccc','ddd'],
        type:1
    }
    componentDidMount() {
        if(this.props.type===1){
            this.setState({
                list:['111','222','333','444'],
            })
        }
    }

    //第一次创建一次,ajax请求又创建一次,setstate更新又创建一次
    static getDerivedStateFromProps(nextProps,nextState){
        console.log('getDrivedStateFromProps')
        console.log(nextProps)
        console.log(nextState)
        return{
            //能够解决频繁异步解决
            type:nextProps.type
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate')
        console.log(this.state.type)
        console.log(prevProps)//老属性
        console.log(prevState)//老状态
        console.log(snapshot)
       //添加判断,与老的状态判断,如果一样直接return出来
        if(this.state.type===prevState.type){
            return
        }
        if(this.state.type===1){
            this.setState({
                list:['111','222','333','444'],
            })
        }else {
            this.setState({
                list:['aaa','bbb','ccc','ddd'],
            })
        }
    }

    render() {
        return(
            <div>
                Content{this.props.type}
                <ul>
                    {
                        this.state.list.map(item=>
                        <li key={item}>{item}</li>
                        )
                    }
                </ul>
            </div>
        )
    }
}


class App extends Component {
    state={
        type:1
    }
    render() {
        return (
            <div>
                <ul>
                    <button onClick={()=>{
                        this.setState({
                            type:1
                        })
                    }}>正在</button>
                    <button onClick={()=>{
                        this.setState({
                            type:2
                        })
                    }}>即将</button>
                </ul>

                <Content type={this.state.type}></Content>
            </div>
        );
    }
}

export default App;